<template>
  <div>
    <lay-table
      :columns="columns"
      id="id"
      :dataSource="dataSource"
      :default-toolbar="false"
      class="tables"
    >
      <template v-slot:menu="{ data }">
        <div>{{ data.name }}</div>
      </template>
      <template v-slot:model="{ data }">
        <div
          v-for="(item, index) in data.model"
          :key="index"
        >
          <div class="box_border">
            <lay-checkbox
              name="like"
              skin="primary"
              v-model="item.selected"
              :value="item.accessPageId"
            ></lay-checkbox>
            {{ item.name }}
          </div>

          <div
            class="box_border list_table"
            v-for="(ites, indexs ) in item.btnList"
            :key="index"
          >
            <lay-checkbox
              name="like"
              skin="primary"
              v-model="ites.selected"
              :value="item.accessPageId"
            ></lay-checkbox>
            {{ ites.name }}
          </div>
        </div>
      </template>

      <template v-slot:user="{ data }">
        <div
          v-for="(item, index) in data.user"
          :key="index"
          class="item_name"
        >
          <lay-tag
            type="primary"
            variant="light"
            color="#165DFF"
          >
            {{ item }}
          </lay-tag>
        </div>
      </template>
    </lay-table>
  </div>
</template>
  
  <script lang='ts'>
import { defineComponent, reactive, ref, computed, toRefs } from "vue";
export default defineComponent({
  name: "App",
  props: ["dataSource", "editVisible"],
  setup(props, event) {
    const columns = [
      {
        title: "菜单",
        customSlot: "menu",
      },
      {
        title: "模块",
        customSlot: "model",
      },
      // {
      //   title: "人员",
      //   customSlot: "user",
      // },
    ];

    const addRle = () => {
      event.emit("claears");
    };

    return {
      columns,
      addRle,
    };
  },
});
</script>
  <style>
.tables .layui-table-cell div {
  display: inline-block !important;
}
</style>
  <style lang="scss" scope>
.item_name {
  display: inline-block;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 8px;
  margin-right: 8px;
}

.layui-checkbox[size="md"]
  .layui-form-checkbox[lay-skin="primary"]
  .layui-checkbox-label {
  margin-left: 28px;
}

.menus {
  display: flex;
  .header {
    width: 500px;
    background: #eee;
  }
  .left_tab {
  }

  .right_box {
  }
}

.box_border {
  width: 100%;
  display: block;
  padding-bottom: 8px;
  padding-top: 8px;
  border-bottom: 1px solid #eee;
}

.list_table {
  margin-left: 40px;
}

.layer-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eeeeee;
  margin-left: 18px;
}
</style>